<template>
  <div class="category-filter">
    <!-- 父级分类 -->
    <div class="parent-container">
      <div class="parent-level" ref="parentLevelRef">
        <div
          v-for="parent in parentData"
          :key="parent.id"
          class="parent-item"
          :class="{ active: isParentActive(parent) }"
          @click="handleParentClick(parent)"
        >
          {{ parent.standardName }}
        </div>
      </div>

      <!-- 子级容器 -->
      <div
        v-if="currentChildren.length > 0"
        class="children-level"
      >
        <div
          v-for="child in currentChildren"
          :key="child.id"
          class="child-item"
          :class="{ active: isChildActive(child) }"
          @click="handleChildClick(child)"
        >
          {{ child.standardName }}
        </div>

        <!-- 递归加载孙级 -->
        <FilterItem
          v-if="currentGrandChildren.length > 0"
          :parent-data="currentGrandChildren"
          :active-parent-id="activeParentId"
          :active-child-id="activeChildId"
          @update-selection="handleGrandChildSelection"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface CategoryItem {
  id: string;
  standardName: string;
  standardType: string;
  standardTypeValue: string;
  standardLevel: string;
  standardLevelValue: string;
  pid: string;
  weight: number;
  remark: string | null;
  hasChosen: boolean;
  children?: CategoryItem[];
}

const props = defineProps<{
  parentData: CategoryItem[];
  activeParentId?: string | null;
  activeChildId?: string | null;
}>();

const emit = defineEmits<{
  (event: 'update-selection', payload: { parentId: string | null; childId: string | null }): void;
}>();

const parentLevelRef = ref<HTMLElement | null>(null);
const activeParentId = ref<string | null>(props.activeParentId || null);
const activeChildId = ref<string | null>(props.activeChildId || null);
const currentChildren = ref<CategoryItem[]>([]);
const currentGrandChildren = ref<CategoryItem[]>([]);

// 检查父级是否激活
const isParentActive = (parent: CategoryItem) => {
  return activeParentId.value === parent.id;
};

// 检查子级是否激活
const isChildActive = (child: CategoryItem) => {
  return activeChildId.value === child.id;
};

// 处理父级点击
const handleParentClick = (parent: CategoryItem) => {
  if (!parent) return; // 检查 parent 是否存在
  activeParentId.value = parent.id;
  activeChildId.value = null;
  currentChildren.value = parent.children || []; // 使用默认值避免 undefined
  currentGrandChildren.value = [];

  // 更新选中状态
  emit('update-selection', { parentId: parent.id, childId: null });
};

// 处理子级点击
const handleChildClick = (child: CategoryItem) => {
  if (!child) return; // 检查 child 是否存在
  activeChildId.value = child.id;
  currentGrandChildren.value = child.children || []; // 使用默认值避免 undefined

  // 更新选中状态
  emit('update-selection', { parentId: activeParentId.value, childId: child.id });
};

// 处理孙级选中事件
const handleGrandChildSelection = (payload: { parentId: string | null; childId: string | null }) => {
  emit('update-selection', payload);
};
</script>

<style scoped>
.category-filter {
  width: 100%;
}

.parent-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  transition: height 0.3s ease;
}

.parent-level {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.parent-item {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
}

.parent-item.active {
  background: #409eff;
  color: white;
}

.children-level {
  margin-top: 10px;
  padding: 10px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.child-item {
  padding: 8px 16px;
  background: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
}

.child-item.active {
  background: #409eff;
  color: white;
}
</style>
